<template>
  <div>
    <el-table :border="true" :data="tableData" style="width: 100%">
      <el-table-column fixed prop="id" label="装备编号" min-width="150" />
      <el-table-column fixed prop="name" label="装备名称" min-width="150" />
      <el-table-column prop="type" label="装备类型" min-width="120" />
      <el-table-column prop="department" label="使用部门" min-width="120" />
      <el-table-column prop="purchaseDate" label="采购日期" min-width="120" />
      <el-table-column prop="scrapDate" label="报废日期" min-width="120" />
      <el-table-column prop="scrapReason" label="报废原因" min-width="150" />
      <el-table-column prop="remarks" label="备注" min-width="200" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scoped">
          <el-popconfirm title="确定撤回吗?" @confirm="confirm(scoped.row)">
            <template #reference>
              <el-button link type="primary" size="small">撤回</el-button>
            </template>
          </el-popconfirm>

          <el-button link type="primary" size="small" @click="del(scoped.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogEdit" title="编辑装备信息" width="400">
      <div class="form">
        <div class="form-item">
          <span class="title">装备名称</span>
          <div class="content">
            <el-input
              v-model="form.name"
              style="width: 240px"
              placeholder="请输入装备名称"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">装备类型</span>
          <div class="content">
            <el-input
              v-model="form.type"
              style="width: 240px"
              placeholder="请输入装备类型"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">使用部门</span>
          <div class="content">
            <el-input
              v-model="form.department"
              style="width: 240px"
              placeholder="请输入使用部门"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">报废原因</span>
          <div class="content">
            <el-input
              v-model="form.scrapReason"
              style="width: 240px"
              placeholder="请输入报废原因"
            />
          </div>
        </div>
        <div class="form-handle">
          <el-button type="primary" @click="saveEdit">确定</el-button>
          <el-button type="primary" @click="dialogEdit = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";

const dialogEdit = ref(false);
const form = ref({
  id: "",
  name: "",
  type: "",
  department: "",
  purchaseDate: "",
  scrapDate: "",
  scrapReason: "",
  remarks: ""
});

const tableData = ref([
  {
    id: "EQ20231101",
    name: "执法记录仪",
    type: "监控设备",
    department: "市容管理局",
    purchaseDate: "2019-05-12",
    scrapDate: "2024-11-01",
    scrapReason: "使用年限已到期",
    remarks: "新款设备已到位，需安全处理旧设备"
  },
  {
    id: "EQ20231102",
    name: "无人机",
    type: "监控设备",
    department: "环保部门",
    purchaseDate: "2020-07-23",
    scrapDate: "2024-10-15",
    scrapReason: "电池老化、性能下降",
    remarks: "拆除电池后妥善回收"
  },
  {
    id: "EQ20231103",
    name: "手持对讲机",
    type: "通讯设备",
    department: "市政部门",
    purchaseDate: "2018-03-10",
    scrapDate: "2024-09-28",
    scrapReason: "无法维修，配件缺失",
    remarks: "已申请新款对讲机替换"
  }
  // 其他装备信息可以继续添加
]);

const confirm = row => {
  row.scrapStatus = "已撤回";
  ElMessage({
    message: "操作成功",
    type: "success"
  });
};

function del(row) {
  const rowIndex = tableData.value.findIndex(i => i.id === row.id);
  tableData.value.splice(rowIndex, 1);
  ElMessage({
    message: "删除成功",
    type: "success"
  });
}

function edit(row) {
  dialogEdit.value = true;
  form.value = { ...row };
}

function saveEdit() {
  const index = tableData.value.findIndex(i => i.id === form.value.id);
  if (index !== -1) {
    tableData.value[index] = { ...form.value };
    ElMessage({
      message: "编辑成功",
      type: "success"
    });
  }
  dialogEdit.value = false;
}
</script>

<style lang="scss" scoped>
.dialog-button {
  margin-top: 16px;
}

.chat-message {
  margin-bottom: 12px;
}

.form {
  .form-handle {
    display: flex;
    justify-content: end;
    margin-top: 12px;
  }
}
</style>
